<template>
  <el-container>
    <el-header>
      <el-row :gutter="0">
        <el-col :span="12">
          <div class="top-title">
            OA系统管理
          </div>
        </el-col>
        <el-col :span="12">
          <div class="toolbar">
            <el-dropdown>
              <!-- 头像,样式 -->
               <el-avatar :src="'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png'"></el-avatar>
              <template #dropdown>
                <el-dropdown-menu>
                  <!-- <el-dropdown-item>个人中心</el-dropdown-item> -->
                  <el-dropdown-item @click="logout">退出登录</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
            <span>{{ currentUser?.employeeName }}</span>
          </div>
        </el-col>
      </el-row>
    </el-header>
    <el-container>
      <el-aside>
        <sidebar></sidebar>
      </el-aside>
      <el-container :style="{ padding: '10px',height:'100vh' }" direction="vertical">
        <el-main class="main">
            <router-view />
        </el-main>
      </el-container>
    </el-container>
  </el-container>

</template>

<script lang="ts" setup>
import sidebar from '@/components/sidebar.vue'
import { onMounted, ref } from 'vue'
import request from '@/api/request'
import { ElMessage } from 'element-plus'
import router from '@/router';

// 获取当前用户
const getCurrentUser = () => {
    const userStr = sessionStorage.getItem("user")
    console.log(JSON.parse(userStr))
    return userStr ? JSON.parse(userStr) : null
}

let currentUser = ref(null);

onMounted(() => {
    currentUser.value = getCurrentUser()
})

// 退出登录
let logout = () =>{
  ElMessage.success('退出登录成功')
  sessionStorage.removeItem("user")
  router.push("/login")
}
let loadPermissions = () => {
  
}
loadPermissions()
</script>
<style scoped>
:deep(.el-menu) {
  --el-menu-bg-color: rgb(48, 65, 86);
  --el-menu-text-color: aliceblue;
  --el-menu-hover-bg-color: #001528 !important;
}

:deep(.el-header) {
  background-color: #b3c0d1;
}
:deep(.el-aside){
  background-color: rgb(48, 65, 86);
}

.top-title {
  font-size: 20px;
  margin-top: 20px;
  margin-left: 50px;
}
.toolbar {
 margin-top: 20px;
 /* 放到右边 */
 text-align: right;
 /* 放大 */
 font-size: 16px;
}
/* 头像往上移 */
.el-avatar { 
  margin-top: -10px;
}


</style>